<template>
    <div class="SOCIETY_wraper">
        <div class="wrap">
            <div class="header">
                <span class="icon"></span>
                <span class="title">{{ $t('p7.tab2.title') }}</span>
            </div>

            <div class="content">
                <div class="left">

                    <div class="introduce">{{ $t('p7.tab2.introduce') }}</div>

                    <div class="bcc">{{ $t('p7.tab2.bcc') }}</div>
                    <div class="post">
                        <div v-if="society" v-html="society.description"></div>
                        <!-- 软件工程师 （应届毕业生）
                        <br>岗位要求：
                        <br>1、大专以上学历，对软件开发感兴趣，专业不限；
                        <br>2、工作积极主动，具有团队合作精神，具有良好的沟通和学习能力；
                        <br>3、熟悉JAVA开发工具。
                        <br>工作职责：
                        <br>1、负责软件的设计、开发、编码以及测试工作；
                        <br>2、负责系统开发过程中文档的编写。 -->
                    </div>
                </div>

                <!-- <div class="right">
                    <img :src="ZP2" alt="">
                </div> -->
            </div>

            <div class="concat">
                <div class="header">{{ $t('p7.tab2.concat') }}</div>
                <div class="description" v-html="$t('p7.tab2.desc')">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ZP2 from '@/assets/images/wi/ZP2.jpg'
import { getStore } from '@/libs'
export default {
    name: "index",
    components: {

    },
    data() {
        return {
            ZP2,
            params: null,
            society: null
        }
    },

    created() {
        this.params = this.$route.query
        this.getInfo()
    },
    methods: {
        /**
         * 详细信息
         */
        async getInfo() {
            let type = 6
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                type = 8; country = 2
            }

            const res = await this.$http({
                url: '/api/sitejoinus/info',
                method: 'GET',
                params: {type, terminal: 2, country}
            })
            this.society = Object.assign({}, res.data)
        },
    }
};
</script>


<style lang="scss" scope>
.SOCIETY_wraper{
    color: #333333;
    .wrap{
        padding: 0 20px;
        .header{
            display: flex;
            align-items: center;
            span.icon{
                display: block;
                width: 5px;
                height: 35px;
                background-color: #98000A;
                border-right: 2px solid #FCA400;
            }
            span.title{
                font-size: 28px;
                font-weight: bold;
                margin-left: 10px;
            }
        }
        .content{
            display: flex;
            margin-top: 20px;

            .left{
                display: flex;
                flex-direction: column;
                flex: 5;

                .introduce{
                    font-size: 22px;
                }

                .bcc{
                    display: flex;
                    align-items: center;
                    font-weight: bold;
                    font-size: 28px;
                    width: 200px;
                    // background:repeating-linear-gradient(to left,#fff,#98000A);
                    padding: 5px;
                    margin-top: 50px;
                }
                .bcc::before{
                    content: "";
                    display: block;
                    width: 20px;
                    height: 20px;
                    margin-right: 5px;
                    background-image: url('../../assets/images/wi/PP89.png');
                    background-size: 100% 100%;
                }

                .post{
                    margin-top: 20px;
                }
            }
            .right{
                display: flex;
                flex: 1 200px;
                justify-content: center;
                img{
                    width: 200px;
                    height: 200px;
                }
            }
        }
        .concat{
            .header{
                display: flex;
                align-items: center;
                // background:repeating-linear-gradient(to left,#fff,#98000A);
                font-weight: bold;
                font-size: 28px;
                padding: 5px;
                margin-top: 50px;
                margin-bottom: 20px;
            }
            .header::before{
                content: "";
                display: block;
                width: 20px;
                height: 20px;
                margin-right: 5px;
                background-image: url('../../assets/images/wi/PCC21.png');
                background-size: 100% 100%;
            }
            .description{
                font-size: 22px;
            }

            margin-bottom: 50px;
        }
    }
}
</style>
